import { Button } from 'antd-mobile'
import React from 'react'
import useCode from '../../conpoment/code/useCode'
import { Form, Input } from 'antd-mobile'
import style from '../login/Css/login.module.css'
import { getCodeApi } from '../../api/loginApi'
import { getLoginApi } from '../../api/loginApi'
import { useNavigate } from 'react-router-dom'
function Index() {
  const [num, fn, disabled] = useCode(60)
  let nav=useNavigate()
  const onFinish = async(values) => {
    const data= await form.validateFields(values)
    console.log(data);
    
    const {data:res}=await getLoginApi(data)
    console.log('登录',res);
    localStorage.setItem('token',res.token)
    localStorage.setItem('pic',res.avatar)
    localStorage.setItem('name',res.token)
    nav('/home')
    
  }
  let [form]=Form.useForm()
const chenge=async()=>{
  const yzm=await form.validateFields(['tel'])
  console.log(yzm);
  
 const {data:res}=await getCodeApi(yzm.tel)
 console.log(res);
 form.setFieldValue('telCode',res.telCode)
fn()
}
  return (
    <div>
      <div className={style.pp}>
        <h1>Hi,欢迎使用</h1>
        <p>未注册过的手机号将自动创建账号</p>
      </div>
    <div className={style.yzm}>
    <Form
    form={form}
      onFinish={onFinish}
      layout='horizontal' mode='card'
      footer={
        <Button block type='submit'  shape='rounded' color='primary'>
          登录
        </Button>
      }
    >
        <Form.Item 
        label='+86'
        name='tel'
        rules={[
          { required: true, message: '姓名不能为空' },
          {
            pattern:/^1[3-9]\d{9}$/,
            message:'请输入正确的手机号'
          }
        ]}
        >
          <Input placeholder='请输入' />
        </Form.Item>

        <Form.Item 
        label='验证码' 
        name='telCode'
        rules={[
          { required: true, message: '姓名不能为空' },
        ]}
        extra={<Button onClick={() => chenge()} disabled={disabled}>
          {disabled ? `${num}秒后获取验证码` : `获取验证码`}
        </Button>}>
          <Input placeholder='请输入' />
        </Form.Item>
      </Form>
    </div>
      


    </div>
  )
}

export default Index
